<template>
 <div>
   <pl-table :datas="data.tableData"
              ref="plTable"
              height="300"
              big-data-checkbox
              fixed-columns-roll
              header-drag-style
              show-summary
              :total-option="[{ label: '地址' }]"
              use-virtual
              :row-height="50">
      <template slot="empty">
        没有查询到符合条件的记录
      </template>
      <pl-table-column type="selection" width="55"/>
      <pl-table-column type="index" width="100" fixed/>
      <!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
      <pl-table-column
              v-for="item in columns"
              :key="item.id"
              :resizable="item.resizable"
              :show-overflow-tooltip="item.showOverflowTooltip"
              :prop="item.prop"
              :label="item.label"
              :fixed="item.fixed"
              :width="item.width"/>
    </pl-table>
 </div>
</template>

<script>
 export default {
  name: '',
  components: {

  },
  data () {
   return {
      data: {
          tableData:Array.from({ length: 2000 }, (_, idx) => ({
            id: idx + 1,
            date: '2016-05-03',
            name: 1,
            ab: '欢迎使用pl-table',
            address: 1 + idx
          }))
        },
     columns: [
          {prop: 'date', label: '日期', width: 120},
          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '挖挖掘机挖掘机挖掘机掘机', width: 100},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
          {prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
          {prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true}
        ],
   }
  },
  mounted() {

  },
  methods: {

  }
 }
</script>

<style lang='stylus'>

 
</style>
